<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-flex>
					<pure-button text="默认按钮"></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 边框按钮 -->
			<pj-demo title="边框按钮">
				<pure-flex>
					<pure-button
						text="边框按钮"
						border
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 内置主题 -->
			<pj-demo title="内置主题">
				<pure-flex wrap>
					<pure-button
						text="主要按钮"
						theme="primary"
					></pure-button>
					<pure-button
						text="成功按钮"
						theme="success"
					></pure-button>
					<pure-button
						text="警告按钮"
						theme="warning"
					></pure-button>
					<pure-button
						text="危险按钮"
						theme="danger"
					></pure-button>
					<pure-button
						text="信息按钮"
						theme="info"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 扩展主题 -->
			<pj-demo title="扩展主题">
				<pure-flex wrap>
					<pure-button
						text="扩展主题"
						theme="--custom-button-theme-1"
					></pure-button>
					<pure-button
						text="扩展主题"
						theme="--custom-button-theme-2"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 幽灵按钮 -->
			<pj-demo title="幽灵按钮">
				<pure-flex wrap>
					<pure-button
						text="幽灵按钮"
						ghost
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="primary"
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="success"
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="warning"
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="danger"
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="info"
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="--custom-button-theme-1"
					></pure-button>
					<pure-button
						text="幽灵按钮"
						ghost
						theme="--custom-button-theme-2"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 镂空按钮 -->
			<pj-demo title="镂空按钮">
				<pure-flex wrap>
					<pure-button
						text="镂空按钮"
						plain
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="primary"
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="success"
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="warning"
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="danger"
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="info"
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="--custom-button-theme-1"
					></pure-button>
					<pure-button
						text="镂空按钮"
						plain
						theme="--custom-button-theme-2"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 按钮图标 -->
			<pj-demo title="按钮图标">
				<pure-flex wrap>
					<pure-button
						text="前置图标"
						iconName="__arrow-left"
						theme="primary"
					></pure-button>
					<pure-button
						text="后置图标"
						afterIconName="__arrow-right"
						theme="success"
					></pure-button>
					<pure-button
						text="前后都有图标"
						iconName="__arrow-left"
						afterIconName="__arrow-right"
						theme="warning"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 矩形按钮 -->
			<pj-demo title="矩形按钮">
				<pure-flex wrap>
					<pure-button
						text="矩形按钮"
						shape="square"
						theme="primary"
						ghost
					></pure-button>
					<pure-button
						text="矩形按钮"
						shape="square"
						theme="success"
						ghost
					></pure-button>
					<pure-button
						text="矩形按钮"
						shape="square"
						theme="warning"
						ghost
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 圆角按钮 -->
			<pj-demo title="圆角按钮">
				<pure-flex wrap>
					<pure-button
						text="圆角按钮"
						shape="round"
						theme="danger"
						ghost
					></pure-button>
					<pure-button
						text="圆角按钮"
						shape="round"
						theme="info"
						ghost
					></pure-button>
					<pure-button
						text="圆角按钮"
						shape="round"
						theme="--custom-button-theme-1"
						ghost
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 方块按钮 -->
			<pj-demo title="方块按钮">
				<pure-flex wrap>
					<pure-button
						text="你"
						shape="cube"
						theme="--custom-button-theme-2"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						text="好"
						shape="cube"
						theme="primary"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						text="啊"
						shape="cube"
						theme="success"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						text="💯"
						shape="cube"
						theme="warning"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						iconName="/static/images/i_001.png"
						shape="cube"
						theme="danger"
						ghost
						loadingText=""
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 圆形按钮 -->
			<pj-demo title="圆形按钮">
				<pure-flex wrap>
					<pure-button
						text="你"
						shape="circle"
						theme="--custom-button-theme-2"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						text="好"
						shape="circle"
						theme="primary"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						text="啊"
						shape="circle"
						theme="success"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						text="💯"
						shape="circle"
						theme="warning"
						ghost
						loadingText=""
					></pure-button>
					<pure-button
						afterIconName="/static/images/i_002.png"
						shape="circle"
						theme="danger"
						ghost
						loadingText=""
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 块状按钮 -->
			<pj-demo title="块状按钮">
				<pure-flex wrap>
					<pure-button
						text="块状按钮"
						block
						theme="--custom-button-theme-1"
						ghost
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 链接按钮 -->
			<pj-demo title="链接按钮">
				<pure-flex wrap>
					<pure-button
						text="链接按钮"
						link
					></pure-button>
					<pure-button
						text="链接按钮"
						link
						theme="--custom-button-theme-1"
						afterIconName="__fenxiang"
					></pure-button>
					<pure-button
						text="链接按钮"
						link
						theme="--custom-button-theme-2"
						iconName="__zuo3"
						afterIconName="__you3"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 下划线 -->
			<pj-demo
				title="下划线"
				desc="一般配合链接按钮使用"
			>
				<pure-flex wrap>
					<pure-button
						text="下划线按钮"
						link
						underline
					></pure-button>
					<pure-button
						text="下划线按钮"
						link
						theme="--custom-button-theme-1"
						underline
						afterIconName="__dignwei"
					></pure-button>
					<pure-button
						text="下划线按钮"
						link
						theme="--custom-button-theme-2"
						underline
						iconName="__zuo3"
						afterIconName="__you3"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo title="禁用状态">
				<pure-flex wrap>
					<pure-button
						text="禁用按钮"
						disabled
					></pure-button>
					<pure-button
						text="禁用按钮"
						disabled
						border
					></pure-button>
					<pure-button
						text="禁用按钮"
						disabled
						theme="warning"
					></pure-button>
					<pure-button
						text="禁用按钮"
						disabled
						theme="--custom-button-theme-1"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 加载状态 -->
			<pj-demo title="加载状态">
				<pure-flex wrap>
					<pure-button
						text="加载状态"
						loading
						loadingText="加载中"
					></pure-button>
					<pure-button
						text="加载状态"
						loading
						loadingText="加载中"
						theme="primary"
					></pure-button>
					<pure-button
						text="加载状态"
						loading
						theme="success"
						shape="cube"
					></pure-button>
					<pure-button
						text="加载状态"
						loading
						theme="success"
						shape="circle"
					></pure-button>
					<pure-button
						text="加载状态"
						loading
						loadingText="加载中"
						theme="success"
						link
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 防抖 -->
			<pj-demo
				title="防抖"
				desc="为了方便使用，按钮内置了防抖功能，默认防抖时间为 `800ms`"
			>
				<pure-flex>
					<pure-button
						shape="block"
						theme="warning"
						text="点击我时，两次时间间隔不能小于 5 秒"
						debounce
						time="5000"
						tips="点击的太快啦"
					></pure-button>
				</pure-flex>
			</pj-demo>

			<!-- 事件 -->
			<pj-demo
				title="事件"
				desc="微信小程序和支付宝小程序的事件 `uni-app` 没做统一处理，比如获取用户手机号，微信小程序是 `open-type='getPhoneNumber'`，而支付宝小程序是 `open-type='getAuthorize'` 同时还需设置 `scope='phoneNumber'`，`pure-button` 组件做了处理，可以统一设置成 `open-type='getPhoneNumber'`，但是支付宝侧还是需要设置 `scope='phoneNumber'`"
			>
				<pure-flex>
					<pure-button
						block
						theme="danger"
						text="获取手机号-在控制台查看输出"
						debounce
						time="5000"
						tips="点击的太快啦"
						open-type="getPhoneNumber"
						@onGetPhoneNumber="handleGetPhoneNumber"
						scope="phoneNumber"
					></pure-button>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	// 获取手机号
	function handleGetPhoneNumber(e) {
		console.log(e);
	}
</script>

<style lang="scss" scoped>
	.page {
		--page-layout-background: var(--pure-background-default);
		--pure-cell-background: var(--pure-background-light);

		// 扩展按钮主题
		--custom-button-theme-1: #00a783;
		--custom-button-theme-2: #9900ff;
	}
</style>
